
import React from 'react';
import {parsePercent, safeMultiple} from '~/utils/number';

import CommonEchart from '~/page/FineBi/common/CommonEchart';
import {formatTooltip} from '../../utils';
import withPannel from '../withPannel';

const tooltipCallback = params => formatTooltip(params);

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left',
    },
    xAxis: {
        common: {
            axisLabel: {
                // rotate: 30
            }
        }
    },
    yAxis: {
        common: {
            splitLine: {show: false},
            axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        common: {
            stack: '总量',
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'top', formatter: labelFormatter},
        }
    }
};

const StudentChart = props => {
    const {dataSource, unitId} = props;

    return (
        <CommonEchart
            {...props}
            id={unitId}
            height={400}
            extendEchartsOptions={extendOptions}
            dataSource={dataSource}
        />
    );
};

export default withPannel(StudentChart);
